<template>
    <div id="bg">
        <el-row justify="center" align="middle">
            <el-col :span="8">
                <h3 class="title">气象局合同管理系统</h3>
                <el-form label-width="80px" :model="loginForm" :rules="rules" ref="formIns">
                    <el-form-item label="用户名：" prop="username">
                        <el-input v-model="loginForm.username"/>
                    </el-form-item>
                    <el-form-item label="密码：" prop="password">
                        <el-input type="password" v-model="loginForm.password"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleLogin">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue"
import type{FormInstance, FormRules} from "element-plus"
import { ElMessage } from 'element-plus'
import { login } from "@/api/api";
import { useRouter } from "vue-router";
import {useRouteStore} from "@/stores/routeStore"
const router=useRouter();
const store=useRouteStore();
// import { getStudents } from "../api/api"
const loginForm=reactive<LoginForm>({
    username:"",
    password:""
})
const rules:FormRules={
    username:{required:true,message:"请输入用户名",trigger:'blur'},
    password:{required:true,message:"请输入密码",trigger:'blur'},
}
const formIns=ref<FormInstance>();
const routesArr=[
  {
    path:"password",
    component:()=>import("@/views/Password.vue"),
    meta:{
        label:"密码管理"
    }
  },
  {
    path:"customer",
    component:()=>import("@/views/Customer.vue"),
    meta:{
        label:"客户管理"
    }
  },
  {
    path:"role",
    component:()=>import("@/views/Role.vue"),
    meta:{
        label:"角色管理"
    }
  },
  {
    path:"manager",
    component:()=>import("@/views/Manager.vue"),
    meta:{
        label:"成员管理"
    }
  },
  {
    path:"contract",
    component:()=>import("@/views/Contract.vue"),
    meta:{
        label:"合同管理"
    }
  },
  {
    path:"menu",
    component:()=>import("@/views/Menu.vue"),
    meta:{
        label:"菜单管理"
    }
  },
];

const handleLogin=async ()=>{
    try{
        await formIns.value?.validate();
        const res=await login(loginForm);
        if(res.data.code===200){
            ElMessage.success("登录成功");
            sessionStorage.setItem("login","yes");
            sessionStorage.setItem("userid",String(res.data.id));
            sessionStorage.setItem("rid",res.data.rid.toString())
            await store.addRoutes(res.data.rid);
            router.push('/main');
        }else{
            // console.log(res.data.msg);
            ElMessage.error("登录失败");
        }
    }catch(e){
        console.log(e);
    }
}

onMounted(async () => {

})
</script>
<style scoped>
#bg {
    width: 100vw;
    height: 100vh;
    background-image: url(@/assets/login.webp);
    background-size: cover;
    background-position: center;
}

.el-row {
    height: 100vh;
}

.el-col {
    height: 300px;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 10px white;
    border-radius: 15px;
}

.title {
    text-align: center;
    line-height: 30px;
    font-size: 24px;
}

.el-form {
    margin: 0 30px;
}

.el-button {
    width: 100%;
}
</style>